<template>
  <div class="related-courses-list">
    <div
      class="related-courses-list-title flex-center-wrap flex-justify-between"
    >
      <strong>
        最新资讯
      </strong>
      <a class="more right-arrow" :href="goMore()" target="_blank">
        更多
        <i class="iconfont icon-quanbu text-third f12"></i>
      </a>
    </div>
    <div class="related-courses-list-content">
      <a
        :class="[
          'related-courses-list-item',
          index === list.length - 1 ? 'b-n' : ''
        ]"
        v-for="(item, index) in list"
        :key="item.id"
        @click="$event => goNews($event, item)"
        :href="parseFullPath(`${item.path}_detail/${item.id}.html`)"
      >
        <p class="ell-1 related-courses-list-item-title" v-if="item.topic">
          {{ item.topic }}
        </p>

        <p
          class="related-courses-list-item-content ell-2"
          v-if="item.description"
        >
          {{ item.description }}
        </p>
        <time class="related-courses-list-item-time">
          {{ item.news_time }}
        </time>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    professionPath: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      zlaBtn: {
        key_name: '',
        key_content: ''
      }
    }
  },
  watch: {
    // 之了埋点
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  },
  methods: {
    goMore() {
      let { professionPath } = this
      if (!professionPath) {
        professionPath = 'cjkj'
      }
      return this.parseFullPath(`/${professionPath}/all/`)
    },
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    },
    goNews(e, row) {
      // 阻止默认跳转
      e.preventDefault()
      this.zlaBtn = {
        key_name: '最新资讯',
        key_content: '最新资讯'
      }
      let { path, id } = row
      if (!path || !id) {
        return this.$message.warning('该资讯暂无详情页')
      }
      this.goTo(`${path}_detail/${id}.html`, {
        target: '_blank',
        watch: true
      })
    }
  }
}
</script>

<style scoped>
.related-courses-list {
  width: 312px;
  background: #ffffff;
  padding: 24px 0;
}
.related-courses-list-title {
  position: relative;
  height: 30px;
  font-size: 22px;
  font-weight: 600;
  color: #383838;
  line-height: 30px;
  padding: 0 20px;
}
.related-courses-list-title::after {
  display: block;
  content: '';
  width: 3px;
  height: 24px;
  background: #3480ff;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.related-courses-list-content {
  margin-top: 24px;
  padding: 0 20px;
  max-width: 312px;
  overflow-x: hidden;
}
.more {
  cursor: pointer;
  display: block;
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
  text-decoration: none;
}

.related-courses-list-item-title {
  width: 272px;
  height: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #383838;
  line-height: 22px;
  text-decoration: none;
}

/**添加a标签下划线**/
.related-courses-list-item-title:hover {
  text-decoration: underline;
}

.related-courses-list-item-content {
  margin-top: 12px;
  width: 272px;
  max-height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
}

.related-courses-list-item-time {
  display: block;
  margin-top: 12px;
  height: 16px;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  line-height: 16px;
}

.related-courses-list-item {
  display: block;
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 16px;
  margin-bottom: 16px;
  text-decoration: none;
}

.b-n {
  border: none;
  margin-bottom: 0;
  padding-bottom: 0px;
}
</style>
